<template>
  <a-card :bordered="false">
    <div class="type-box">
      <div
        :class="[index == state.type ? 'active' : 'normal']"
        v-for="(item,index) in typeList"
        :key="item"
        @click="handleChangeType(index)"
      >{{item}}</div>
    </div>
    <a-form layout="inline" autocomplete="off">
      <a-form-item label="输入搜索">
        <a-input v-model:value="state.sreach_name" placeholder="商品名称/编码/条形码" />
      </a-form-item>
      <a-form-item label="商品分类">
        <a-input v-model:value="state.sreach_name" placeholder="商品名称/编码/条形码" />
      </a-form-item>
      <a-form-item>
        <a-button type="primary" @click="handleSearchList">
          <template #icon>
            <search-outlined />
          </template>
          查询
        </a-button>
        <a-button style="margin-left:10px" @click="handleResetList">
          <template #icon>
            <reload-outlined />
          </template>
          重置
        </a-button>
      </a-form-item>
    </a-form>
  </a-card>

  <a-card :bordered="false">
    <div class="table-top-box">
      <div>数据列表</div>
      <div>
        <a-button type="primary" @click="handleGoAddGoods">
          <template #icon>
            <plus-outlined />
          </template>
          新增商品
        </a-button>
        <a-button @click="handleReload" style="margin-left:10px">
          <template #icon>
            <reload-outlined />
          </template>
          刷新
        </a-button>
      </div>
    </div>
    <a-table :scroll="{y: 550 }" :dataSource="table.tableData" :columns="table.tableColumns" :row-selection="rowSelection">
      <template #bodyCell="{ column, record }">
        <template v-if="column.key === 'goods_master_image'">
          <a-image :src="record.goods_master_image" />
        </template>
        <template v-else-if="column.key === 'price'">
          <a-button type="link" @click="handlePreviewImage(record.jd_images)">京东</a-button>
          <a-button type="link" @click="handlePreviewImage(record.tm_images)">天猫</a-button>
          <a-button type="link" @click="handlePreviewImage(record.pdd_images)">拼多多</a-button>
        </template>
        <template v-else-if="column.key === 'goods_verify'">
          <a-tag color="orange" v-if="record.goods_verify == 1">待审核</a-tag>
          <a-tag color="green" v-if="record.goods_verify == 2">审核通过</a-tag>
          <a-tag color="red" v-if="record.goods_verify == 3">审核失败</a-tag>
        </template>
        <template v-else-if="column.key === 'action'">
          <a-button type="link" @click="handleEdit(record.id)">编辑</a-button>
        </template>
      </template>
    </a-table>
  </a-card>

  <!-- 预览图片 -->
  <a-modal v-model:visible="state.visible" :footer="null" width="50%" centered>
    <a-image :src="previewImage" />
  </a-modal>
</template>
<script setup>
import { PlusOutlined, SearchOutlined, ReloadOutlined } from '@ant-design/icons-vue'
import { onMounted, reactive, ref } from '@vue/runtime-core'
import { useRouter } from 'vue-router'

import tableColumns from './tableColumns'
import { seaAdminGoodsList } from '../../config/api'
import { message } from 'ant-design-vue'

const router = useRouter()
// 类型
const typeList = reactive(['商品管理', '草稿', '审核中', '已上架', '已下架', '未通过'])

// table数据
const table = reactive({
  tableData: [],
  tableColumns
})
// 搜索条件
const state = reactive({
  type: 0,
  sreach_name: '',
  page: 1,
  visible: false,
  previewImage: ''
})

onMounted(() => {
  getList()
})

// table选择
const rowSelection = ref({
  checkStrictly: false,
  onChange: (selectedRowKeys, selectedRows) => {
    console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows)
  },
  onSelect: (record, selected, selectedRows) => {
    console.log(record, selected, selectedRows)
  },
  onSelectAll: (selected, selectedRows, changeRows) => {
    console.log(selected, selectedRows, changeRows)
  }
})

// 编辑
const handleEdit = id => {
  router.push({
    path: '/addGoods',
    query: {
      id,
      type: 'edit'
    }
  })
}

//预览图片
const handlePreviewImage = value => {
  if (value) {
    state.visible = true
    state.previewImage = value
  } else {
    message.error('暂无对比价图')
  }
}

//新增商品
const handleGoAddGoods = () => {
  router.push({ path: '/addGoods' })
}

// 刷新
const handleReload = () => {
  router.go(0)
}

// 重置
const handleResetList = () => {
  state.page = 1
  state.sreach_name = ''
  getList()
}

//查询
const handleSearchList = () => {
  state.page = 1
  getList()
}

//切换类型
const handleChangeType = type => {
  state.type = type
  getList()
}

// 获取商品列表
const getList = async () => {
  let obj = { page: state.page, type: state.type, sreach_name: state.sreach_name }
  const res = await seaAdminGoodsList(obj)
  table.tableData = res.data.data
}
</script>
<style scoped lang="scss">
.type-box {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  margin-bottom: 20px;
  padding-bottom: 10px;
  border-bottom: 1px solid #f6f6f6;

  div {
    width: 120px;
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 16px;
    font-weight: 500;
    cursor: pointer;
  }
  .active {
    background: #f6f6f6;
    color: #3c7cfc;
    border-radius: 4px;
  }

  .normal {
    color: #1a1a1a;
  }
}
.table-top-box {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  div {
    font-size: 16px;
    color: #1d2129;
  }
}
</style>
